<template>
  <div class="dashboard-container">
    <div>个人用户管理系统</div>
    <div>
      <div style="margin: 10px">
        <el-form label-width="20%" :rules="userRoles" :model="addUserList" ref="ruleForm">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="addUserList.userName" maxlength="20" show-word-limit style="width: 80%"
                      clearable placeholder="请输入用户名称"/>
          </el-form-item>
          <el-form-item label="密码" prop="userPassword">
            <el-input v-model="addUserList.userPassword" maxlength="20" show-word-limit
                      style="width: 80%" clearable placeholder="请输入用户密码"/>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-grout v-model="addUserList.sex" maxlength="1" show-word-limit style="width: 80%">
              <el-radio v-model="addUserList.sex" label="男">男</el-radio>
              <el-radio v-model="addUserList.sex" label="女">女</el-radio>
            </el-radio-grout>
          </el-form-item>
          <el-form-item label="电话号码" prop="phoneNumber">
            <el-input v-model="addUserList.phoneNumber" maxlength="11" show-word-limit
                      style="width: 80%" clearable placeholder="请输入电话号码"/>
          </el-form-item>
          <el-form-item label="身份证号" prop="identificationCard">
            <el-input v-model="addUserList.identificationCard" maxlength="18" show-word-limit
                      style="width: 80%" clearable placeholder="请输入身份证号"/>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addUserList.remark" maxlength="30" show-word-limit style="width: 80%"
                      clearable placeholder="请输入备注"/>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-button type="primary" @click="updateUserButton" style="margin-left: 30%">保存</el-button>
    <el-button type="" @click="checkUser" style="margin-left: 20%">重置</el-button>
  </div>
</template>

<script>
// 引入mapGetters方法
import {deleteUser, insert, select, update} from "@/api/user";
import {Loading} from "element-ui";
import {valid} from "mockjs";
import {mapGetters} from "vuex";
import fa from "element-ui/src/locale/lang/fa";

export default {
  name: "Users",
  // 使用mapGetters方法获取userId、userName、roleName
  computed: {
    ...mapGetters(["userId", "userName", "roleName"]),
  },
  data() {
    return {
      userId1: this.$store.state.user.userId,
      userName1: this.$store.state.user.userName,
      roleName1: this.$store.state.user.roleName,
      userList: [],
      selectButtonLoading: false,
      addUserButtonController: false,

      //弹窗打开事件
      addUserList: {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      userRoles: {
        userName: [{required: true, trigger: 'blur', message: '用户名不能为空'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}],
        userPassword: [{required: true, trigger: 'blur', message: '用户密码不能为空'},
          {min: 6, max: 20, message: '长度在 6 到 60 个字符', trigger: 'blur'}],
        sex: [{required: true, trigger: 'blur', message: '性别不能为空'},
          {min: 1, max: 1, message: '性别只能是一位且必须是男或者女', trigger: 'blur'}],
        phoneNumber: [{required: true, trigger: 'blur', message: '电话号码不能为空'},
          {min: 11, max: 11, message: '请输入合法的电话号码', trigger: 'blur'}],
        identificationCard: [{required: true, trigger: 'blur', message: '身份证号不能为空'},
          {min: 18, max: 18, message: '请输入合法身份证号', trigger: 'blur'}]
      },
      updateUserButtonController: false,
      updateUserDate: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      deleteController: false,
      deleteUserId: ''
    };
  },
//页面初始化方法
  mounted() {
    this.selectUser()
  },
  // 页面的事件，方法
  methods: {
    selectUser() {
      this.selectButtonLoading = true;
      select({
        userId: this.userId1
      }).then(
        response => {
          this.addUserList = response.data[0];
        }
      )
    },
    checkUser() {
      this.userId2 = ''
      this.userName2 = ''
      this.roleName2 = ''
      this.selectUser()
    },
    closeDialog(ruleForm) {
      this.$refs[ruleForm].resetFields()
      this.addUserButtonController = false;
      this.updateUserButtonController = false;
    },
    addUser(ruleNme) {
      this.$refs[ruleNme].validate((valid) => {
        if (valid) {
          console.log('插入:')
          console.log(this.addUserList)
          insert({
            userName: this.addUserList.userName,
            userPassword: this.addUserList.userPassword,
            sex: this.addUserList.sex,
            phoneNumber: this.addUserList.phoneNumber,
            identificationCard: this.addUserList.identificationCard,
            remark: this.addUserList.remark
          }).then(response => {
            this.addUserButtonController = false
            this.selectUser()
          })
        } else {
          return false
        }
      })
    },
    addUserButton() {
      this.addUserList = {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      }
      this.addUserButtonController = true
    },
    updateUserButton(row) {
      this.updateUserDate = {
        userTableId: row.userTableId,
        userId: row.userId,
        roleId: row.roleId,
        userName: row.userName,
        userPassword: row.userPassword,
        sex: row.sex,
        phoneNumber: row.phoneNumber,
        identificationCard: row.identificationCard,
        remark: row.remark
      }
      this.updateUserButtonController = true
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('修改：')
          console.log(this.updateUserDate)
          update({
            userTableId: this.updateUserDate.userTableId,
            userId: this.updateUserDate.userId,
            roleId: this.updateUserDate.roleId,
            userName: this.updateUserDate.userName,
            userPassword: this.updateUserDate.userPassword,
            sex: this.updateUserDate.sex,
            phoneNumber: this.updateUserDate.phoneNumber,
            identificationCard: this.updateUserDate.identificationCard,
            remark: this.updateUserDate.remark,
          }).then(response => {
            this.updateUserButtonController = false
            this.selectUser()
          })
        } else {
          return false
        }
      })
    },
    deleteButton(row) {
      this.deleteUserId = row.userId
      this.deleteController = true
    },
    deleteUser() {
      deleteUser({userId: this.deleteUserId}).then(
        response => {
          this.deleteController = false
          this.selectUser()
        }
      )
    }
  }
};
</script>

<style lang="scss" scoped>
// 定义dashboard类
.dashboard {

  // 定义dashboard-container类
  &-container {
    // 设置外边距
    margin: 30px;
  }

  // 定义dashboard-text类
  &-text {
    // 设置字体大小
    font-size: 30px;
    // 设置行高
    line-height: 46px;
  }
}

</style>
